<template>
    <div>
    <div class="nav">
        <div class="left">
           <router-link to="/">
            <img src="../assets/HeaderListimg/logo.png" alt="" class="img">
           </router-link>
        </div>
        <ul class="center" id="ulNav">
            <li>首页</li>
            <li v-for="(item,index) in categoryList" :key="index" @click="goErji(item.id)">
                {{ item.name }}
              <div></div>
            </li>
        </ul>
        <div class="right">
          <div class="right_left">
            <i class="iconfont icon-sousuo"></i>
            <input type="text" placeholder="搜一搜">
          </div>
          <div class="right_right" @click="goCart"> 
            <i class="iconfont icon-gouwuche"></i>
            <span class="num">0</span>
          </div>
        </div>
    </div>
    </div>
</template>

<script >
import {getCategory} from "@/apis/headerList"
 export default {
       data(){
        return {
            categoryList:[]
        }
           
       },
       methods:{
        async  getCategoryData(){
        let res=await getCategory()
        //  console.log(res)
          if(res.code == 1){
        this.categoryList=res.result
        //  console.log( this.categoryList)
       }
           },
           goErji(id){
            this.$router.push(
                {
                path:"/"+id,
                query:{
                    queryId:id
                }
            }
            )
           },
           goCart(){
            this.$router.push({
                path:"/cart"
            })
           }
       },
       mounted(){
       this.getCategoryData()
       }
    }
</script>

<style scoped lang="scss">
li.show{
    border-bottom: 1px solid #27ba9b;
    a{
        color: #27ba9b;
    }
}
.nav{
    padding: 0 15%;
    height: 132px;
    display: flex;
    background-color: #fff;
    justify-content: space-between;
    align-items: center;
    .left{
        .img{
            display: block;
            height: 80px;
        }
    }
    .center{
        display: flex;
        align-items: center;
        flex: 1;
        justify-content: space-around;
        li{
            font-size: 16px;
            height: 32px;
            line-height: 32px;
            font-family: "微软雅黑";
          a{
            display: inline-block;
            height: 32px;
            line-height: 32px;
            &.router-link-active{
             color:  #27ba9b;
             border-bottom: 1px solid #27ba9b ;
        }
          }
        }
        li:hover {
         border-bottom: 1px solid  #27ba9b;
        }
        li:hover a{
            color: #27ba9b;
        }
    }
    .right{
        display: flex;
        align-items: center;
        .right_left{
            width: 170px;
            height: 32px;
            display: flex;
            align-items: center;
            border-bottom: 0.5px solid #e7e7e7;
            // box-shadow: 2px 2px #ddd;
            input{
                width: 140px;
                border: 0;
              
                padding-left: 5px;
                
            }
        }
        .right_right{
            position: relative;
            top: 0;
            left: 0;
            margin-left: 10px;
            .num{
                display: inline-block;
                padding: 0 5px;
                height: 12px;
                font-size: 12px;
                background-color: #f00;
                border-radius: 40%;
                position: absolute;
                top: -2px;
                right: -16px;
                line-height: 12px;
                text-align: center;
                color: #fff;
                font-weight: 600;
            }
        }
    }
}
.iconfont{
    font-size: 18px;
}
</style>